<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购车车--web0701</title>
    <link rel="stylesheet/less" href="./css/cart.less">
</head>

<body>
    <div id="box">
        <h2 class="title">购物车</h2>

        <div id="cart">
            <script type="text/html" id="cart-template">
                {{if isEmpty}}
                <h1>当前购物车为空</h1>
                {{else}}

                <div id="items" class="item">

                    <div class="item-top">
                        {{if status}}
                        <input type="checkbox" id="checkedAll" checked>
                        {{else}}
                        <input type="checkbox" id="checkedAll">
                        {{/if}}

                    </div>
                    <ul class="item-bottom">

                        {{each carts cart index}}

                        <li class="item-bottom-li">
                            <div class="item-bottom-li-sel">

                                {{if cart.status}}
                                <input type="checkbox" data-id="{{cart.id}}" data-index={{index}} name="checkedGoods"
                                    checked>
                                {{else}}
                                <input type="checkbox" data-id="{{cart.id}}" data-index={{index}} name="checkedGoods">
                                {{/if}}

                            </div>
                            <div class="item-bottom-li-img">
                                <img src="{{cart.image}}" alt="">
                            </div>
                            <div class="item-bottom-li-dea">
                                <div>{{cart.name}}</div>
                                <ul>
                                    <li>¥{{cart.price}}</li>
                                    <li>
                                        <button data-flag=false data-id="{{cart.id}}" data-name="{{cart.name}}"
                                            name="optBtn">-</button>
                                        <span>{{cart.num}}</span>
                                        <button data-flag=true data-id="{{cart.id}}" data-name="{{cart.name}}"
                                            name="optBtn">+</button>
                                    </li>
                                    <li>
                                        ¥{{(cart.price * cart.num).toFixed(2)}}
                                    </li>
                                </ul>
                            </div>

                        </li>
                        {{/each}}




                    </ul>
                    <div class="item-z clearBox">
                        已选择{{totalNum}}件商品，总价{{totalPrice.toFixed(2)}}元
                    </div>


                </div>
                {{/if}}
            </script>


        </div>


        <div class="btn">
            <button id="clareCart">清空购物车</button>
            <button onclick="javascript:history.back()">返回</button>
        </div>


    </div>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.js">
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/2.5.3/less.js"></script>
    <script type="module">

        import $$ from "./common/js/myTools.js"

        const {getNode,getNodes} = $$;

        const clareCartNode = getNode("#clareCart")

  

        loadHtml();   
        
        /*
           加载购物车
        */
        function loadHtml() {
         
            // 1获取购物车中的数据
            const carts = $$.getCookie("cart") || []
            // 2判断购物车是否为空
            const isEmpty = carts.length ? false : true;
            // 3购物车数据
            // 4购物车全局状态
            const status = carts.every(cart => cart.status)
            // 5获取购物车中选中的数据 
            const checkedCart = carts.filter(cart => cart.status)
            // 5总价 reduce
            const totalPrice = checkedCart.reduce((pre,cart)=> pre + cart.price*cart.num,0);

            // 6 总数量
            const totalNum = checkedCart.reduce((pre,cart)=> pre + cart.num,0);
            const html =template("cart-template",{isEmpty,carts,status,totalPrice,totalNum})
            getNode("#cart").innerHTML = html
            
            // 选择全选/反选
            const checkedAllNode = getNode("#checkedAll")
            // 这里修改一下 当为空时候会找不到 checkedAll节点
            if(checkedAllNode!=null){
                checkedAllNode.onclick = checkedAllFunction;
           

           // 选择每个商品
           const checkedNodes = getNodes("input[name=checkedGoods]")
           checkedNodes.forEach(node => node.onclick = checkedFunction)
           // 获取操作的节点 
           const optNodes = getNodes("button[name=optBtn]")
           optNodes.forEach(node => node.onclick = optFunction)

            }
        
            
        }
 
        /*
           注册全选和反选的函数
        */      
        function checkedAllFunction() {
            // 1  获取全选和反选的状态 
            const status = this.checked;
            // 2  获取购物车数据 
            const carts = $$.getCookie("cart") || []
            // 3  改变所有购物车中的所有状态 
            carts.forEach(cart => cart.status = status);
            // 4  重置cookies
            $$.setCookie("cart",JSON.stringify(carts),60*1000*60*24)

            // 5 重新渲染页面
            loadHtml();
         
          

        }
        
        /**
         *  点击子项
        */
        function checkedFunction() {
            // 1 获取购物车中的数据 
            const carts = $$.getCookie("cart") || []
            // 2 获取点击的这一项  通过索引判断  操作的是购物车的第几项

            const {id,index} =  this.dataset;
            const status = this.checked;

            const cart  = carts.find(node => node.id === id)

            // 3 找到购物车中点击的这一项 
                //   carts[index].status = status
                cart.status = status

            // 4 修改购物车中这一项的状态 

            console.log(id,index);

            // 5 重新设置购物车
            $$.setCookie("cart",JSON.stringify(carts),60*1000*60*24)


            // 5 刷新这个网页
            loadHtml();

        }
        
        /*
           购物车的操作 
              增加 减少  删除
        */
        function optFunction() {
            // 获取购物车中的数据 
            const carts = $$.getCookie("cart") || []
            // 结构标签中的表示
            const {id,name,flag}  = this.dataset;
            // 从购物车中获取操作的商品
            const cart  = carts.find(node => node.id === id)

            //console.log(typeof eval(flag));
            if(eval(flag)) {
                // 增减商品数量 
                cart.num++;

            }else {

                // 减少商品数量 或者 删除商品数量
                if(cart.num === 1) {
                    // 删除这个商品
                    if(confirm(`是否确认删除购物车中的${name}商品`)) {
                        // 查找购物车中的索引
                        const index = carts.findIndex(cart => cart.id === id)
                        //  删除购物车中的内容 
                        carts.splice(index,1)

                    }else {
                        alert("取消删除成功!")
                    }
                }else {
                    cart.num--;
                }

            }
            // 将购物车重置
            $$.setCookie("cart",JSON.stringify(carts),60*1000*60*24)

              // 重新刷新这个网页
              loadHtml();



        }

        /*
          清空购物车
        */
        clareCartNode.onclick = function() {

            if(confirm("是否要清除购物车总所有的数据")) {
                 // 清空cookies 
                 $$.clearCookies();
                 alert("购物车清空成功!")
                 // 加载当前网页
                 loadHtml();

            }

        }

     

    </script>
</body>

</html>